{% extends "base.html" %}
{%load staticfiles%}

{% block css %}
  <link rel="stylesheet" href="{% static 'bower_components/select2/dist/css/select2.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/dataTables.bootstrap.min.css' %}">
{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      用户及权限
      <small>调用权限</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/manage/token_manage"><i class="fa fa-dashboard"></i> 部门</a></li>
    </ol>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#appTokenModal">
            新增
        </button>
        <div class="box box-default">
          <table id="app_token_table" class="table table-striped table-bordered dataTable no-footer" >
            <thead>
              <tr>
                  <th>ID</th>
                  <th>调用应用名</th>
                  <th>token</th>
                  <th>工单前缀</th>
                  <th>工作流权限</th>
                  <th>创建人</th>
                  <th>创建时间</th>
                  <th>操作</th>
              </tr>
            </thead>
            <tbody>
      
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="modal fade" id="appTokenModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">调用权限</h4>
          </div>
          <div class="modal-body">
              <form class="form-horizontal" action='/api/v1.0/accounts/app_token' method="post" id='token_form'>
                  <div class="box-body">
                    <div class="form-group">
                      <label for="inputAppName" class="col-sm-3 control-label">调用应用<span style="color:red">*</span></label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="inputAppName" placeholder="请输入调用方应用名" required>
                      </div>
                    </div>
                    <div class="form-group">
                      <label for="ticketSnPrefix" class="col-sm-3 control-label" data-toggle="tooltip"  title="设定该应用创建的工单流水号前缀，如前缀为loonflow,则生成的工单流水号为loonflow201901010001">工单前缀<i class="fa fa-fw fa-question"></i></label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" id="ticketSnPrefix" placeholder="如为loonflow,则生成的工单流水号为loonflow201901010001">
                      </div>
                    </div>
                    <div class="form-group">
                        <label for="workflowSelect" class="col-sm-3 control-label"  data-toggle="tooltip"  title="该应用拥有loonflow哪些工作流的操作权限:包括创建对应工作流的工单，查看工单详情等">工作流权限<span style="color:red">*</span><i class="fa fa-fw fa-question"></i></label>
                        <div class="col-sm-9">
                          <select class="form-control select2" multiple="multiple" id="workflowSelect" data-placeholder="选择该应用有权限的工作流"
                                  style="width: 100%;" required>
                          </select>
                        </div>
                      </div>
                      <input type="text" class="form-control" id="appTokenId" style="display:none">
                  </div>
                  <!-- /.box-body -->
                  <div class="box-footer">
                    <!-- <button type="submit" class="btn btn-info pull-right">确定</button> -->
                    <input type="button" value="保存" class="btn btn-info pull-right" onclick = "submitAppToken();" />
                  </div>
                  <!-- /.box-footer -->
                </form>
          </div>
        </div>
      </div>
    </div>

    </section>

{% endblock %}
{% block js %}
<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bower_components/select2/dist/js/select2.full.min.js' %}"></script>

<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<script src="{% static 'dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dist/js/dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'dist/js/jquery.validate.js' %}"></script>
<script src="{% static 'dist/js/sweetalert.min.js' %}"></script>
<script src="{% static 'dist/js/account/token_manage.js' %}"></script>

<script>

</script>
{% endblock %}
